<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.min.js"></script>
    <style>
        #strat{
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            position: relative;
            top: 480px;
            left: 300px;
            background-color: #99cc33;
            margin: 0;
            padding: 0;
        }
        #end{
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            position: relative;
            top: 480px;
            left: 570px;
            background-color: #ff0000;
            margin: 0;
            padding: 0;
        }
        .p{
            width: 100px;
            height: 100px;
            background-color: #20b2aa;
            float: left;
            margin: 10px;
            text-align: center;
            line-height: 100px;
        }
        #box{
            overflow: hidden;
        }
        .select_box{
            width: 100px;
            height: 100px;
            background-color: #adff2f;
            float: left;
            margin: 10px;
            text-align: center;
            line-height: 100px;
        }

    </style>
</head>
<body>
    <input type="button" onclick="start()" value="开始" id="start"/>
    <input type="button" onclick="end()" value="停止" id="end"/>;
    <div id="box"></div>
</body>
<script>
    //定义一个全局变量，定时最会用到

var timeId=0;

onload = function(){

//DOM方法， 获得标签

var box = document . getElementById("box");//用循环的方法，遍历出学号

for(var直曲1;1<31;1++){

//创建一 p标签

var p =document.createElement('p');//给p标签添加内容

p. innerHTML =学号+1;

//添加属性，然后再style里面写样式p.className = 'p';

把标签添加到外部盒子里边

box. appendChild(p);
}}

//开始选择

function start(){

//定时器，定义一个函数

timeId - setInterva1(function(){

//随机出一个数

var num= Math.floor(Math. random()*38);//获得p标签

var pp = document. getElementsByTagName('p')//循环

for(var i =1;1<pp.length;1++){

//判断，如果随机的数等于学号

if(i ==nun){

//给相等的那个学生样式，跟其他人的不一样PP[num].className = ' select box';
pp[num].className="select_box";
//如果不相等，则样式不变

}else{
    pp[i].className='p';
}
}
},100);
}
function end(){
    clearInterval(timeId)
}
</script>
</html>